<template>
  <div class="container-fluid">
    <div class="panel">
      <div class="panel-header" style="height: 30px">
        <p class="panel-title pull-left">添加数据源</p>
      </div>
      <div class="panel-body">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="metric http" @click="showHttpDialog">
              <p>
                <span class="number">HTTP</span>
                <span class="title">HTTP 数据源</span>
              </p>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="metric mysql" @click="showMySQLDialog">
              <p>
                <span class="number">MySQL</span>
                <span class="title">MySQL 数据源</span>
              </p>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="metric redis" @click="showRedisDialog">
              <p>
                <span class="number">Redis</span>
                <span class="title">Redis 数据源</span>
              </p>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="metric mongodb" @click="showMongoDBDialog">
              <p>
                <span class="number">MongoDB</span>
                <span class="title">MongoDB 数据源</span>
              </p>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="metric hbase" @click="showHBaseDialog">
              <p>
                <span class="number">HBase</span>
                <span class="title">HBase数据源</span>
              </p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="panel">
      <div class="panel-body">
        <el-row>
          <el-col :span="14" :offset="5">
            <el-input placeholder="编码或名称" v-model="searchText" class="input-with-select">
              <template #append>
                <el-button icon="el-icon-search" @click="search"></el-button>
              </template>
            </el-input>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="panel">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column type="expand">
          <template #default="props">
            <el-descriptions title="用户信息">
              <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
              <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
              <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
              <el-descriptions-item label="备注">
                <el-tag size="small">学校</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
            </el-descriptions>
          </template>
        </el-table-column>
        <el-table-column
          width="50px"
          label="ID"
          prop="id">
        </el-table-column>
        <el-table-column
          :formatter="formatterType"
          width="100px"
          label="类型"
          prop="type">
        </el-table-column>
        <el-table-column
          width="200px"
          label="名称"
          prop="name">
        </el-table-column>
        <el-table-column
          label="description"
          prop="description">
        </el-table-column>
        <el-table-column
          width="200px"
          label="创建时间"
          prop="createTime">
        </el-table-column>
        <el-table-column
          width="200px"
          label="更新时间"
          prop="updateTime">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template #default="scope">
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:current-page="page.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        v-model:page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        v-model:total="page.total">
      </el-pagination>
    </div>

    <el-dialog
      :title="dialogAddDatasourceTitle"
      v-model="dialogAddDatasourceVisible"
      width="50%">
      <el-form label-position="left" label-width="150px" :model="datasourceConfig">
        <el-form-item label="名称">
          <el-input v-model="datasourceConfig.name" placeholder="一个名称，全局唯一，最好是英文"></el-input>
        </el-form-item>
        <el-form-item label="启用状态">
          <el-switch v-model="datasourceConfig.activeStatusBool" active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="datasourceConfig.description"></el-input>
        </el-form-item>


        <div v-show="datasourceConfig.type === 1">
          <el-form-item label="最大空闲连接">
            <el-input-number :min="0" :max="65535" v-model="httpExpansionConfig.maximumPoolSize"
                             placeholder="最大空闲连接，建议在 1 - 100 "></el-input-number>
          </el-form-item>
          <el-form-item label="连接最大存活时间">
            <el-input-number :min="0" :max="100000" v-model="httpExpansionConfig.keepAliveDuration"
                             placeholder="连接最大存活时间，单位秒"></el-input-number>
          </el-form-item>
        </div>

        <div v-show="datasourceConfig.type === 2">
          <el-form-item label="host">
            <el-input v-model="mysqlExpansionConfig.host" placeholder="MySQL host"></el-input>
          </el-form-item>
          <el-form-item label="port">
            <el-input-number :min="0" :max="65535" v-model="mysqlExpansionConfig.port"
                             placeholder="MySQL 端口号"></el-input-number>
          </el-form-item>
          <el-form-item label="database">
            <el-input v-model="mysqlExpansionConfig.database" placeholder="MySQL database"></el-input>
          </el-form-item>
          <el-form-item label="username">
            <el-input v-model="mysqlExpansionConfig.username" placeholder="MySQL username"></el-input>
          </el-form-item>
          <el-form-item label="password">
            <el-input v-model="mysqlExpansionConfig.password" placeholder="MySQL password"></el-input>
          </el-form-item>
          <el-form-item label="minimumIdle">
            <el-input-number :min="1" :max="100" v-model="mysqlExpansionConfig.minimumIdle"
                             placeholder="最小空闲连接，建议在 1 - 100 "></el-input-number>
          </el-form-item>
          <el-form-item label="maximumPoolSize">
            <el-input-number :min="1" :max="100" v-model="mysqlExpansionConfig.maximumPoolSize"
                             placeholder="最大空闲连接，建议在 1 - 100 "></el-input-number>
          </el-form-item>
        </div>

        <div v-show="datasourceConfig.type === 3">
          <el-form-item label="host">
            <el-input v-model="redisExpansionConfig.host" placeholder="Redis host"></el-input>
          </el-form-item>
          <el-form-item label="port">
            <el-input-number :min="0" :max="65535" v-model="redisExpansionConfig.port"
                             placeholder="Redis 端口号"></el-input-number>
          </el-form-item>
          <el-form-item label="database">
            <el-input-number :min="0" :max="65535" v-model="redisExpansionConfig.database"
                             placeholder="Redis database"></el-input-number>
          </el-form-item>
          <el-form-item label="password">
            <el-input v-model="redisExpansionConfig.password" placeholder="Redis password"></el-input>
          </el-form-item>
          <el-form-item label="timeout">
            <el-input-number v-model="redisExpansionConfig.timeout" placeholder="Redis 读写超时时间"></el-input-number>
          </el-form-item>

          <el-form-item label="minIdle">
            <el-input-number v-model="redisExpansionConfig.minIdle" placeholder="最小空闲连接数量，正整数"></el-input-number>
          </el-form-item>
          <el-form-item label="maxIdle">
            <el-input-number v-model="redisExpansionConfig.maxIdle"
                             placeholder="最大空闲连接数量，正整数，大于等于 minIdle"></el-input-number>
          </el-form-item>
          <el-form-item label="maxActive">
            <el-input-number v-model="redisExpansionConfig.maxActive"
                             placeholder="最大连接数量，正整数，大于等于 maxIdle"></el-input-number>
          </el-form-item>
          <el-form-item label="maxWait">
            <el-input-number v-model="redisExpansionConfig.maxWait" placeholder="获取连接的最大等待时间，正整数"></el-input-number>
          </el-form-item>
        </div>

        <div v-show="datasourceConfig.type === 4">
          <el-form-item label="host">
            <el-input v-model="mongoDBExpansionConfig.host" placeholder="MongoDB host"></el-input>
          </el-form-item>
          <el-form-item label="port">
            <el-input-number :min="0" :max="65535" v-model="mongoDBExpansionConfig.port"
                             placeholder="MongoDB 端口号"></el-input-number>
          </el-form-item>
          <el-form-item label="database">
            <el-input v-model="mongoDBExpansionConfig.database" placeholder="MongoDB database"></el-input>
          </el-form-item>
          <el-form-item label="username">
            <el-input v-model="mongoDBExpansionConfig.username" placeholder="MongoDB username"></el-input>
          </el-form-item>
          <el-form-item label="password">
            <el-input v-model="mongoDBExpansionConfig.password" placeholder="MongoDB password"></el-input>
          </el-form-item>
          <el-form-item label="minSize">
            <el-input-number :min="1" :max="100" v-model="mongoDBExpansionConfig.minSize"
                             placeholder="最小空闲连接，建议在 1 - 100 "></el-input-number>
          </el-form-item>
          <el-form-item label="maxSize">
            <el-input-number :min="1" :max="100" v-model="mongoDBExpansionConfig.maxSize"
                             placeholder="最大空闲连接，建议在 1 - 100"></el-input-number>
          </el-form-item>
          <el-form-item label="timeout(毫秒)">
            <el-input-number :min="-1" v-model="mongoDBExpansionConfig.maxWaitTimeMS"
                             placeholder="MongoDB 获取连接时最大的等待时间（毫秒）"></el-input-number>
          </el-form-item>
        </div>


      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogAddDatasourceVisible = false">取 消</el-button>
          <el-button type="primary" @click="addDatasource">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";
import {addDatasource, fetchDatasourceConfig} from "../../api/engine/datasource";

export default {
  name: "BaseDatasourceConfig",
  data() {
    return {
      searchText: "",
      tableData: [],
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      dialogAddDatasourceVisible: false,
      dialogAddDatasourceTitle: "",
      datasourceConfig: {
        name: "",
        type: 1,
        expansionConfig: "",
        activeStatusBool: true,
        description: "",
      },
      httpExpansionConfig: {
        maximumPoolSize: 5,
        keepAliveDuration: 300
      },
      mysqlExpansionConfig: {
        host: "",
        port: 3306,
        database: "",
        username: "",
        password: "",
        minimumIdle: 5,
        maximumPoolSize: 5
      },
      redisExpansionConfig: {
        host: "",
        port: 3306,
        database: 0,
        password: "",
        timeout: 2500,
        minIdle: 0,
        maxIdle: 8,
        maxActive: 8,
        maxWait: 300
      },
      mongoDBExpansionConfig: {
        host: "",
        port: 27017,
        database: "",
        username: "",
        password: "",
        minSize: 0,
        maxSize: 100,
        maxWaitTimeMS: 120000,
      }
    }
  },
  methods: {
    handleSizeChange() {
      this.search()
    },
    handleCurrentChange() {
      this.search()
    },
    formatterType(row) {
      let label = ""
      switch (row.type) {
        case 1:
          label = "HTTP"
          break;
        case 2:
          label = "MySQL"
          break;
        case 3:
          label = "Redis"
          break;
        case 4:
          label = "MongoDB"
          break;
        default:
          label = "我不知道"
      }
      return label
    },
    search() {
      let that = this
      fetchDatasourceConfig(that.page.currentPage, that.page.pageSize).then(response => {
        that.tableData = response.data.dataList
        that.page.total = response.data.totalCount
        that.tableData.forEach(item => {
          if (item.expansionConfig)
            item.expansionConfig = JSON.parse(item.expansionConfig)
        })
      })
    },
    showHttpDialog() {
      this.dialogAddDatasourceTitle = "HTTP"
      this.dialogAddDatasourceVisible = true
      this.datasourceConfig = {
        type: 1,
        activeStatusBool: true,
      }
      this.httpExpansionConfig = {
        maximumPoolSize: 5,
        keepAliveDuration: 300
      }
    },
    showMySQLDialog() {
      this.dialogAddDatasourceTitle = "MySQL"
      this.dialogAddDatasourceVisible = true
      this.datasourceConfig = {
        type: 2,
        expansionConfig: "",
        activeStatusBool: true,
      }
      this.mysqlExpansionConfig = {
        host: "",
        port: 3306,
        database: "",
        username: "",
        password: "",
        minimumIdle: 5,
        maximumPoolSize: 5
      }
    },
    showRedisDialog() {
      this.dialogAddDatasourceTitle = "Redis"
      this.dialogAddDatasourceVisible = true
      this.datasourceConfig = {
        type: 3,
        expansionConfig: "",
        activeStatusBool: true,
      }
      this.redisExpansionConfig = {
        host: "",
        port: 3306,
        database: 0,
        password: "",
        timeout: 2500,
        minIdle: 0,
        maxIdle: 8,
        maxActive: 8,
        maxWait: 300
      }
    },
    showMongoDBDialog() {
      this.dialogAddDatasourceTitle = "MongoDB"
      this.dialogAddDatasourceVisible = true
      this.datasourceConfig = {
        type: 4,
        activeStatusBool: true,
        expansionConfig: ""
      }
      this.mongoDBExpansionConfig = {
        host: "",
        port: 27017,
        database: "",
        username: "",
        password: "",
        minSize: 0,
        maxSize: 100,
        maxWaitTimeMS: 120000,
      }
    },
    showHBaseDialog() {
      this.dialogAddDatasourceTitle = "HBase"
      this.dialogAddDatasourceVisible = true
      this.datasourceConfig = {
        type: 5,
        expansionConfig: ""
      }
    },
    addDatasource() {
      let that = this

      // 校验逻辑
      if (!!!that.datasourceConfig.name) {
        ElMessage.error('名称不能为空');
        return
      }
      if (!!!that.datasourceConfig.description) {
        ElMessage.error('描述不能为空');
        return
      }

      let expansionConfig;
      let datasourceType = that.datasourceConfig.type
      let configValidator = null;
      switch (datasourceType) {
        case 1:
          // HTTP 校验逻辑
          configValidator = that.validateHttpConfig
          expansionConfig = that.httpExpansionConfig
          break
        case 2:
          // MySQL 校验逻辑
          configValidator = that.validateMySQLConfig
          expansionConfig = that.mysqlExpansionConfig
          break
        case 3:
          // Redis 校验逻辑
          configValidator = that.validateRedisConfig
          expansionConfig = that.redisExpansionConfig
          break
        case 4:
          // Redis 校验逻辑
          configValidator = that.validateMongoDBConfig
          expansionConfig = that.mongoDBExpansionConfig
          break
      }

      if (configValidator == null) {
        ElMessage.error('错了哦，这是一条神奇的错误消息');
        return
      }

      let validateResult = configValidator(expansionConfig);
      if (!validateResult) {
        return
      }
      expansionConfig = JSON.stringify(expansionConfig)


      that.datasourceConfig.expansionConfig = expansionConfig

      addDatasource(that.datasourceConfig).then(response => {
        that.dialogAddDatasourceVisible = false
        that.search()
        ElMessage.success('添加成功');
      }).catch(error => {
        console.info(error)
        ElMessage.error(error.response.data.message);
      })

    },
    validateHttpConfig(httpExpansionConfig) {
      if (httpExpansionConfig.maximumPoolSize < 0 || httpExpansionConfig.maximumPoolSize > 100) {
        ElMessage.error('最大空闲连接建议在 1 - 100 之间');
        return false
      }

      if (httpExpansionConfig.keepAliveDuration < 0 || httpExpansionConfig.keepAliveDuration > 3000) {
        ElMessage.error('最大空闲连接建议在 1 - 3000 之间');
        return false
      }
      return true
    },
    validateMySQLConfig(mysqlExpansionConfig) {
      if (!!!mysqlExpansionConfig.host) {
        ElMessage.error('host 不能为空');
        return
      }

      if (mysqlExpansionConfig.port < 0 || mysqlExpansionConfig.port > 65535) {
        ElMessage.error('port 应该在 1 - 65535 之间');
        return false
      }

      if (!!!mysqlExpansionConfig.database) {
        ElMessage.error('database 不能为空');
        return
      }

      if (!!!mysqlExpansionConfig.username) {
        ElMessage.error('username 不能为空');
        return
      }

      if (!!!mysqlExpansionConfig.password) {
        ElMessage.error('password 不能为空');
        return
      }

      if (!!!mysqlExpansionConfig.password) {
        ElMessage.error('password 不能为空');
        return
      }

      if (mysqlExpansionConfig.minimumIdle < 0 || mysqlExpansionConfig.minimumIdle > 100) {
        ElMessage.error('minimumIdle 建议在 1 - 100 之间');
        return false
      }

      if (mysqlExpansionConfig.maximumPoolSize < 0 || mysqlExpansionConfig.maximumPoolSize > 100) {
        ElMessage.error('maximumPoolSize 连接建议在 1 - 100 之间');
        return false
      }
      return true
    },
    validateRedisConfig(expansionConfig) {
      if (!!!expansionConfig.host) {
        ElMessage.error('host 不能为空');
        return
      }

      if (expansionConfig.port < 0 || expansionConfig.port > 65535) {
        ElMessage.error('port 应该在 1 - 65535 之间');
        return false
      }

      if (expansionConfig.database < 0) {
        ElMessage.error('database 应为正整数');
        return
      }

      if (!!!expansionConfig.password) {
        ElMessage.error('password 不能为空');
        return
      }

      if (!!!expansionConfig.timeout) {
        ElMessage.error('timeout 不能为空');
        return
      }

      if (expansionConfig.minIdle < 0) {
        ElMessage.error('minIdle 应该是正整数');
        return false
      }

      if (expansionConfig.maxIdle < expansionConfig.minIdle) {
        ElMessage.error('maxIdle 应该不小于 minIdle');
        return false
      }

      if (expansionConfig.maxActive < expansionConfig.maxIdle) {
        ElMessage.error('maxActive 应该不小于 maxIdle');
        return false
      }

      if (!!!expansionConfig.maxWait) {
        ElMessage.error('maxWait 不能为空');
        return
      }

      return true
    },
    validateMongoDBConfig(expansionConfig) {
      if (!!!expansionConfig.host) {
        ElMessage.error('host 不能为空');
        return
      }

      if (expansionConfig.port < 0 || expansionConfig.port > 65535) {
        ElMessage.error('port 应该在 1 - 65535 之间');
        return false
      }

      if (!!!expansionConfig.database < 0) {
        ElMessage.error('database 不能为空');
        return
      }

      if (!!!expansionConfig.username) {
        ElMessage.error('username 不能为空');
        return
      }

      if (!!!expansionConfig.password) {
        ElMessage.error('password 不能为空');
        return
      }

      if (expansionConfig.minSize < 0) {
        ElMessage.error('minSize 应该是正整数');
        return false
      }

      if (expansionConfig.maxSize < expansionConfig.minSize) {
        ElMessage.error('maxSize 应该大于等于 minSize');
        return false
      }
      return true
    }
  },
  mounted() {
    this.search()
  }
}
</script>

<style scoped>

</style>
